<template>
	<view class="u-p-t-60">
		<view class="u-text-center">
			<image src="/static/images/login_logo.png" mode="" style="height: 265rpx;width: 340rpx;"></image>
		</view>
		<view class="u-flex u-row-center u-padding-20 u-m-t-60">
			<view class=" u-m-t-10" @click="selectXy">
				<u-icon size="40" :name="select==1?'/static/images/radio_select.png':'/static/images/radio.png'">
				</u-icon>
			</view>
			<view class="u-m-l-20 xttextr">
				<text>我同意</text>
				<text class="xy" @click="$mHelper.to('/pages/login/protocol',true)">《电影用户协议》</text>
			</view>
		</view>
		<view class="" style="width: 60%;margin-left: 20%;">
			<u-button :custom-style="customStyle" :hairLine="false" @click="bindGetUserInfo">微信授权登录</u-button>
		</view>
		<view class="u-text-center u-m-t-50" style="color: #999999;">
			暂不登录
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				customStyle: {
					marginTop: '20px', // 注意驼峰命名，并且值必须用引号包括，因为这是对象
					color: '#333333',
					background: '#FFEC3E',
					border: '#fff'
				},
				select: 0,

				//微信登录信息
				sessionKey: '',
				openId: '',
				nickName: null,
				avatarUrl: null,
				userInfo: {},
				canIUse: uni.canIUse('button.open-type.getUserInfo'),
				canIGetUserProfile: false,
			}
		},
		methods: {
			//点击登录
			bindGetUserInfo(e) {
				console.log(123);
				if (this.select == 0) {
					this.$refs.uToast.show({
						title: '请阅读并勾选《电影用户协议》！',
						type: 'error',
					})
					return;
				}
				var _this = this;
				uni.getUserProfile({
					desc: '登录',
					success: (res) => {
						console.log(res);
						//获取用户信息
						_this.userInfo = res;
						// this.updateUserInfo();
						try {
							_this.login();
						} catch (e) {}
					},
					fail: (res) => {
						console.log(res)
					}
				});
			},
			//登录
			login() {
				let _this = this;
				// 获取登录用户code
				uni.login({
					provider: 'weixin',
					success: function(res) {
						//console.log(res);
						if (res.code) {
							let code = res.code;
							//将用户登录code传递到后台置换用户SessionKey、OpenId等信息
							//...写用code置换SessionKey、OpenId的接口
							//置换成功调用登录方法_this.updateUserInfo();
							_this.updateUserInfo(code);
						} else {
							uni.showToast({
								title: '登录失败！',
								duration: 2000
							});
							console.log('登录失败！' + res.errMsg)
						}
					},
				});
			},
			updateUserInfo(code) {
				uni.showLoading({
					title: '登录中...'
				});
				let _this = this;
				var params = {
					code: code,
					raw_data: this.userInfo.rawData
				}
				this.$http.post('api/UsersPublic/wxlogin', params).then(res => {
					if (res.code == 0) {
						//请求成功，获取用户信息
						this.getUserInfo(res.data.token);
					}
				})
			},
			getUserInfo(token) {
				uni.request({
					url: this.$store.state.baseUrl + '/api/UsersPublic/getuse',
					method: 'GET',
					header: {
						'XX-Token': token,
						'XX-Device-Type': 'wxapp'
					},
					success: res => {
						if (res.data.code == 0) {
							this.$store.commit('login', {
								token: token,
								userinfo: res.data.data
							})
							try {
								uni.reLaunch({
									url: '/pages/index/index'
								})
							} catch (e) {}
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},
			selectXy() {
				this.select = !this.select
			}
		}
	}
</script>

<style lang="scss">
	.xttextr {
		color: #666666;

		.xy {
			color: #000000;
			text-decoration: underline;
		}
	}
</style>
